// 负责去 享用 复用的数据 或者逻辑
const Btn = (props) => <button>子组件 {props.data}</button>;

// const a = 123;
// const b = "456";
// const c = true;
// const d = [];
// const e = {};
// const ABC = <button>按钮</button>;
// 以上 都是数据

// 负责提供 需要复用的逻辑 数据
function DataProvider(props) {
  console.log(props);
  return (
    <div>
      <div>============= DataProvider =================</div>
      {/* <Btn></Btn>
      {Btn()}
      {<button>子组件</button>} */}

      {/* 函数的调用  */}
      {/* {props.render(100)} */}
      {props.children(100)}

      <div>============= DataProvider =================</div>
    </div>
  );
}

export default function App() {
  return (
    <>
      {/* <Get>{(response) => <div>{response.data.message} </div>}</Get> */}

      {/* render 函数的声明  */}
      {/* <DataProvider><button>123</button></DataProvider> */}
      <DataProvider>{(data) => <Btn data={data} />}</DataProvider>
      {/* <DataProvider render={(data) => <Btn data={data} />}></DataProvider> */}
    </>
  );
}

// // 调用
// fn(123)

// // 声明
// function fn(params) {
//   console.log(params);
// }
